<!-- activity -->
<template>
  <div class="content">
    <div class="content-container">
      <div class="content-btn">
        <!-- <Cbutton @click="handleAdd">添加导航</Cbutton> -->
        <!-- <Cbutton @click="getList">刷新</Cbutton> -->
      </div>

      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="imgUrl" label="导航图标" align="center">
          <template slot-scope="scope">
            <el-image style="height: 50px; width: 50px;" class="product-img-small" :src="scope.row.imgUrl"
                      :preview-src-list="scope.row.imgUrl ? [scope.row.imgUrl] : []"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="navigationName" label="导航名称" align="center"></el-table-column>
        <el-table-column prop="href" label="导航路径" align="center"></el-table-column>
        <el-table-column prop="statusSwitch" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.statusSwitch" @change="handleStatus(scope.row, 'status')"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
          <template slot-scope="scope">
            <el-input class="text-center" v-model="scope.row.sort" @change="handleSortChange(scope.row, 'sort')"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
            <!-- <el-button type="text" style="color: #F56C6C;" size="medium" @click="handleRemove(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新建活动导航 修改活动导航 -->
    <el-dialog :title="dialog.title" v-if="dialog.show" :visible.sync="dialog.show" width="600px" class="dialog-form"
               :close-on-click-modal="false">
      <el-form :model="dialog.data" :rules="dialog.rules" ref="DlalogForm" size="medium" label-width="130px">
        <el-form-item label="导航名称：" prop="navigationName">
          <el-input v-model="dialog.data.navigationName" placeholder="请输入导航名称"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接：" prop="">
          <el-input v-model="dialog.data.href" placeholder="请输入导航跳转链接"></el-input>
        </el-form-item>
        <el-form-item label="导航排序：" prop="sort">
          <el-input v-model="dialog.data.sort" placeholder="请输入导航排序"></el-input>
        </el-form-item>
        <el-form-item label="是否显示：" prop="status">
          <el-radio-group v-model="dialog.data.status">
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'0'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转类型：" prop="">
          <el-radio-group v-model="dialog.data.type">
            <el-radio :label="'1'">跳转外部H5</el-radio>
            <el-radio :label="'2'">跳转内部H5</el-radio>
            <el-radio :label="'3'">无动作</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="导航图标：" prop="imgUrl">
          <Upload v-model="dialog.data.imgUrl" :limit="1" :limitSize="{width: 150, height: 150}" :fileLists="dialog.data.imgUrl ? [dialog.data.imgUrl] : []"></Upload>
          <span style="color:#c0c4cc">导航图标尺寸小于150x150像素</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancle('DlalogForm')">取 消</el-button>
        <el-button size="medium" :loading="dialog.btnLoading" type="primary" @click="handleDiaSub('DlalogForm')">确
          定</el-button>
      </span>
    </el-dialog>
    <!-- 新建活动导航 修改活动导航 -->
  </div>
</template>

<script>
import { GetClassActivityNavList, DeleteClassActivityNav, AddClassActivityNav, UpdateClassActivityNav } from '@/api/onlineMan'
import { classActivityFormRules } from '@/utils/rules'
import Upload from '@/components/Upload/edit'
export default {
  name: 'classActivity',
  components: { Upload },
  data () {
    return {
      query: {
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      dialog: {
        show: false,
        btnLoadin: false,
        title: '',
        type: '',
        data: {
          navigationName: '',
          href: '',
          imgUrl: '',
          status: '',
          type: '',
          sort: '',
          id: ''
        },
        originData: {
          navigationName: '',
          href: '',
          imgUrl: '',
          status: '1',
          sort: '1',
          type: '2'
        },
        rules: classActivityFormRules
      }
    }
  }, /* data */
  props: {},
  watch: {},
  computed: {},
  created () { }, /* created */
  mounted () {
    this.getList()
  }, /* mounted */
  methods: {
    getList () {
      this.tableLoading = true
      const pamams = JSON.parse(JSON.stringify(this.query))
      GetClassActivityNavList(pamams).then(res => {
        this.tableLoading = false

        let list = res.data.list || []
        list.forEach(e => {
          e.statusSwitch = e.status === 1
          e.originstatusSwitch = e.status === 1
          e.originsort = e.sort
        })
        this.tableList = list
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleAdd () {
      this.dialog.title = '添加导航'
      this.dialog.type = 'ADD'
      this.dialog.show = true
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
    },
    handleUpdate (row) {
      this.dialog.title = '编辑导航'
      this.dialog.type = 'UPDATE'
      this.dialog.show = true
      for (const key in this.dialog.data) {
        if (key === 'status') {
          this.dialog.data[key] = row[key] ? row[key].toString() : '1'
        } else if (key === 'type' || key === 'sort') {
          this.dialog.data[key] = row[key] ? row[key].toString() : ''
        } else {
          this.dialog.data[key] = row[key]
        }
      }
    },
    handleCancle () {
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
      this.dialog.data.id = ''
      this.dialog.show = false
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.dialog.btnLoadin = true
        let pamams = JSON.parse(JSON.stringify(this.dialog.data))
        if (this.dialog.type === 'ADD') {
          delete pamams.id
          AddClassActivityNav(pamams).then(res => {
            this.getList()
            this.dialog.btnLoadin = false
            this.dialog.show = false
            this.$message.success(res.message || '操作成功')
          }).catch(e => {
            this.dialog.btnLoadin = false
          })
        } else {
          UpdateClassActivityNav(pamams).then(res => {
            this.getList()
            this.dialog.btnLoadin = false
            this.dialog.show = false
            this.$message.success(res.message || '操作成功')
          }).catch(e => {
            this.dialog.btnLoadin = false
          })
        }
      })
    },
    handleRemove (row) {
      this.$confirm(`确定要删除该导航吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = row.id
        DeleteClassActivityNav(id).then(res => {
          this.getList()
          this.$message.success(res.message || '操作成功')
        }).catch(() => { })
      }).catch(() => { })
    },
    handleSortChange (row, type) {
      let params = {
        id: row.id,
        sort: row.sort
      }
      const sortReg = /^([1-9]\d*|[0]{1,1})$/ // 含零的正整数正则
      if (!sortReg.test(params.sort)) {
        this.$message.warning('请输入排序数字！')
        return
      }
      this.updateReq(params, row, 'sort')
    },
    handleStatus (row) {
      const params = {
        id: row.id,
        status: row.statusSwitch ? 1 : '0'
      }
      this.updateReq(params, row, 'statusSwitch', true)
    },
    updateReq (params, row, key, force) {
      UpdateClassActivityNav(params).then(res => {
        // this.getList()
      }).catch(e => {
        if (force) {
          row[key] = row['origin' + key]
        }
      })
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  } /* methods */
}

</script>
<style lang='scss' scoped>
</style>
